<template>
    <div class="login" id="login">
        <div class="logo">
            <img src="../../assets/logo.png" />
        </div>
        <div class="form">
            <h1>博客后台系统-登录</h1>
            <br>
            <a-row>
                <a-col class="label" :span="6">
                    用户名
                </a-col>
                <a-col class="" :span="16">
                    <a-input v-model="form.userName" placeholder="请输入用户名" />
                </a-col>
            </a-row>
            <a-row>
                <a-col class="label" :span="6">
                    密码
                </a-col>
                <a-col class="" :span="16">
                    <a-input-password v-model="form.userPass" placeholder="请输入密码" />
                </a-col>
            </a-row>
            <a-row>
                <a-col class="label" :span="6">
                    验证码
                </a-col>
                <a-col class="" :span="6">
                    <a-input v-model="form.imgCode" placeholder="请输入验证码" />
                </a-col>
                <a-col :span="2"></a-col>
                <a-col class="" :span="6">
                    <img id="imgCode" style="cursor: pointer;" title="点击刷新验证码" src="https://www.yys.sx.cn:8888/img/code" alt="请刷新页面" @click="getCode()">
                </a-col>
            </a-row>
            <a-row>
                <a-col>
                    <a-button type="primary" size="large" block>
                        登录
                    </a-button>
                </a-col>
            </a-row><a-row>
                <a-col :span="11">
                    <router-link to="/reg">
                        <a-button type="primary" size="large" block>
                            申请账号
                        </a-button>
                    </router-link>
                </a-col>
                <a-col :span="2"></a-col>
                <a-col :span="11">
                    <router-link to="/forget">
                        <a-button type="primary" size="large" block>
                            忘记密码
                        </a-button>
                    </router-link>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
export default {
    props: ["windowsHeight"],
    data(){
        return{
            form:{
                userName: "",
                userPass: "",
                imgCode: "",
            }
        }
    },
    mounted() {},
    methods: {
        /* 获取验证码方法 */
        getCode(){
            document.getElementById("imgCode").src="https://www.yys.sx.cn:8888/img/code";
        }
    }
};
</script>

<style lang="less" scoped>
.login {
    width: 1200px;
    height: 600px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .logo {
        width: 50%;
        height: 100%;
        padding: 60px;
        float: left;
        box-sizing: border-box;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .form {
        width: 40%;
        height: 100%;
        float: left;
        padding: 60px 20px;
        div{
            font-size: 22px;
            margin: 10px 0;
        }
    }
}
</style>